*{
  padding:0;
  margin: 0;
  box-sizing: border-box;
}
.layout{
  width:1000px;
  max-width: 1200px;
  margin:50px auto;
  .nav{
    display: inline-block;
    width:20%;
    box-shadow: 0 0 2px 0 rgba(0,0,0,.06),0 1px 4px 0 rgba(0,0,0,.12);
    input[type='checkbox']{
      display: none;
    }
    label{
      text-align: center;
      display: block;
      border-bottom:1px dashed gainsboro;
      padding:5px 0;
      &:hover{
        cursor: pointer;
      }
      svg{
        position: relative;
        top: 9px;
        width: 22px;
      }
      .choice-box{
        svg{
          top: 4px!important;
          width: 15px;
        }
      }
    }
    li{
      padding: 5px 0;
      &:hover{
        background: #f3f6f8;
      }
    }
    .nav-child{
      input[type='checkbox']:checked{
        +label{
          .choice-box{
            svg{
              transform: rotate(-90deg);
              transition: all 0.3s;
            }
          }
        }
        ~.nav-item{
          display: none;
        }
      }
    }
  }
  .container{
    display: inline-block;
    width:auto;
    text-align: center;
    box-shadow: 0 0 2px 0 rgba(0,0,0,.06),0 1px 4px 0 rgba(0,0,0,.12);
  }
  ul{
    list-style: none;
    text-align: center;
  }
}